<!-- 
  @Created by   on 2019-4-25 15:14:01.
  @updated by
  @description 风控-所属地市映射维护
-->
<div>
    <el-form-q :field-data="queryFields" :buttons="queryButtons" ref="form"></el-form-q>

    <div class="yu-toolBar">
        <yu-button-group>
            <yu-button icon="document" @click="infoFn" v-if="checkPermission('detail')">查看</yu-button>
            <yu-button icon="plus" @click="addFn" v-if="checkPermission('create')">新增</yu-button>
            <yu-button icon="edit" @click="modifyFn" v-if="checkPermission('edit')">修改</yu-button>
            <yu-button icon="yx-bin" @click="deleteFn" v-if="checkPermission('delete')">删除</yu-button>
            <yu-button icon="yx-file-excel" @click="downloadFn" v-if="checkPermission('download')">模板下载</yu-button>
            <yu-button icon="edit" @click="importFn" v-if="checkPermission('import')">导入</yu-button>
            <yu-button icon="yx-file-excel" @click="exportFn" v-if="checkPermission('export')">导出</yu-button>
        </yu-button-group>
    </div>
    <el-table-x ref="reftable" :row-index="true" :radiobox="false" :base-params="baseParams"
                :data-url="dataUrl" :table-columns="tableColumns" :request-type="'POST'"></el-table-x>
    <!-- 说明dialog可配置宽高属性，若不配置则宽度默认为屏幕50%，高度自适应   :title="viewTitle[viewType]"   -->
    <el-dialog-x :visible.sync="dialogVisible" :title="viewTitle[viewType]" size="large">
        <el-form-x ref="reform" :group-fields="updateFields" :buttons="updateButtons"
                   :disabled="formDisabled"></el-form-x>
    </el-dialog-x>

    <el-dialog-x title="导入信息" :visible.sync="importDialogVisible" width="70%" v-loading="loading2"
                 element-loading-text="上传中">
        <!--<el-row type="flex" :gutter="20">
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="line-height: 8px;">导入规则</span>
                        </div>
                        <div>
                        <span>
                          <font color="#ff0000">
                            <p>要啥自己填</p>
                            <p>要啥自己填</p>
                            <p>要啥自己填</p>
                            <p>要啥自己填</p>
                            <p>要啥自己填</p>
                          </font>
                        </span>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="16">
                <div class="grid-content bg-purple">

                </div>
            </el-col>
        </el-row>-->
        <div class="el-table el-table--fit el-table--striped el-table--border el-table--enable-row-hover el-table--enable-row-transition">
            <div class="el-table__header-wrapper">
                <table class="el-table el-table__header">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>文件名</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(file, index) in files" :key="file.id">
                        <td>{{index + 1}}</td>
                        <td>
                            <div class="filename">
                                {{file.name}}
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="yu-toolBar" style="text-align: center;margin-top: 20px;">
            <el-button-group>
                <file-upload
                        ref="upload"
                        class="el-button"
                        :post-action="uploadUrl"
                        :extensions="extensions"
                        :data="fileData"
                        :headers="headers"
                        v-model="files"
                        accept="application/vnd.ms-excel,application/x-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                        @input-filter="inputFilter"
                        @input-file="inputFile">
                    <i class="fa fa-plus"></i>
                    选择文件
                </file-upload>
                <el-button style="padding-left: 10px" icon="yx-file-excel" @click="commitFileFn">保存</el-button>
                <el-button style="padding-left: 10px" icon="yx-undo2" @click="cancelFn">取消</el-button>
            </el-button-group>
        </div>
    </el-dialog-x>

    <el-dialog-x title="错误信息" :visible.sync="tipsVisible" width="50%" height="80%">
        <div class="el-table el-table--fit el-table--striped el-table--border el-table--enable-row-hover el-table--enable-row-transition"
             style="overflow-y: scroll;max-height: 500px">
            <div class="el-table__header-wrapper">
                <table class="el-table el-table__header">
                    <thead>
                    <tr>
                        <th style="width: 100px">序号</th>
                        <th>错误信息</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(error, index) in errors" :key="error.id">
                        <td>{{index + 1}}</td>
                        <td>
                            <div class="errorname">
                                {{errors[index]}}
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="yu-toolBar" style="text-align: center;margin-top: 20px;">
            <el-button-group>
                <el-button class="coverfn-btn" style="padding-left: 10px" icon="yx-file-excel" @click="handleFn('cover')"
                           v-if="flag!='ExcelError' && flag === 'DataDuplicateError'">覆盖
                </el-button>
                <el-button class="excludefn-btn" style="padding-left: 10px" icon="yx-file-excel" @click="handleFn('exclude')"
                           v-if="flag!='ExcelError' && flag === 'DataDuplicateError'">剔除
                </el-button>
                <el-button class="cancelfn-btn" style="padding-left: 10px" icon="yx-undo2" @click="cancelFn">取消
                </el-button>
            </el-button-group>
        </div>
    </el-dialog-x>
</div>